<template>
	<view
		class="diy-notice notice main-flex"
		:style="{ 
			padding: itemData?.style?.paddingTop + 'px' + ' 10px',
			background: itemData?.style?.background }">
		<view class="notice-icon" v-if="itemData?.params?.icon">
			<image class="notice-icon-img" :src="itemData?.params?.icon"></image>
		</view>
		<view class="main-flex-item">
		<uni-notice-bar
			:showIcon="!itemData?.params?.icon"
			scrollable
			:background-color="itemData?.style?.background"
			:color="itemData?.style?.textColor"
			@click="gotoPages"
			:text="itemData?.params?.text" />
		</view>
	</view>
</template>

<script>
export default {
	props: ['itemData'],
	options: {
		styleIsolation: 'shared'
	},
	methods: {
		/*跳转页面*/
		gotoPages(e) {
			uni.navigateTo({
				url: `/pages/notice/notice`
			})
		}
	}
};
</script>

<style lang="scss">
.diy-notice {
	margin-bottom: 20rpx;
	border-radius: 6rpx;
}
.notice {
	margin-top: 20rpx;
	&-icon {
		display: flex;
		align-items: center;
		&-img {
			width: 24px;
			height: 24px;
		}
	}
	:deep(.uni-noticebar) {
		padding: 5px 10px;
		margin: 0;
		border-radius: 10rpx;
	}
	:deep(.uni-noticebar-icon) {
		color: #e3230e !important;
	}
}
</style>
